<template>
  <div>
    <el-card shadow="always">
      <CategorySelector @categoryChange="categoryChange" 
      style="margin-top:15px" ref="categorySelector"></CategorySelector>
    </el-card>

    <el-card shadow="always" style="margin-top:20px" v-show="showAttrList">
      <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="toAdd">添加属性</el-button>
      <el-table :data="tableData" border style="margin-top:10px" 
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <el-table-column label="属性名称" prop="attrName"  width="150" align="center"></el-table-column>
        <el-table-column label="属性值列表" align="center">
            <template #default="{row}">
                <el-tag type="info" style="margin-right:5px"
                v-for="item in row.attrValueList" :key="item.id" >{{item.valueName}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="{row}">
            <HintButton title="修改" type="primary" size="mini" icon="el-icon-edit" @click="toEdit(row)"></HintButton>
            <el-popconfirm title="确定删除吗？" @onConfirm="removeAttr(row)">
                <HintButton  title="删除" type="danger" size="mini" 
                icon="el-icon-delete" slot="reference"></HintButton>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card shadow="always" style="margin-top:20px" v-show="!showAttrList">
        <el-form  inline>
            <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" v-model="attrs.attrName"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" @click="addAttrValue"
        :disabled="!attrs.attrName">添加属性值</el-button>
        <el-button @click="cancel">取消</el-button>
        <el-table :data="attrs.attrValueList" border style="margin:20px 0">
            <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
            <el-table-column label="属性值名称" prop="valueName"  align="center">
                <template #default="{row,$index}">
                    <div v-if="!row.isEdit" @dblclick="Editable(row,$index)">{{row.valueName}}</div>
                    <el-input :ref="`attrVal${$index}`" @blur="toShow(row)" @keyup.13.native="toShow(row)"
                    v-else placeholder="请输入属性值" size="mini" v-model="row.valueName"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="{row,$index}">
                    <el-popconfirm :title="`确定删除${row.valueName}吗？`"  @onConfirm="removeAttrVal($index)">
                        <HintButton title="删除" icon="el-icon-delete" size="mini" 
                        type="danger" slot="reference"></HintButton>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="primary" @click="addAttr"
        :disabled="!attrs.attrName || attrs.attrValueList.length === 0">保存</el-button>
        <el-button @click="cancel">取消</el-button>
    </el-card>
  </div>
</template>

<script>
   import cloneDeep from 'lodash/cloneDeep'
   export default {
    name: 'AttrList',
    data(){
        return {
            tableData:[],
            category1Id:'',
            category2Id:'',
            category3Id:'',
            loading: false,
            showAttrList:true,
            attrs:{
                attrName:'',
                attrValueList:[]
            },
            flag:false //控制输入的属性值是否重复
        }
    },
    methods: {
        // 发送新增 &修改属性的请求
        async addAttr(){
            //修改的时候需要id
            const {id} = this.row
            let data ={
                attrName:this.attrs.attrName,
                attrValueList:this.attrs.attrValueList,
                categoryId:this.category3Id,
                categoryLevel:3,
                id
            }
            await this.$API.attr.saveAttrInfo(data)
            this.$message.success({
                message:'保存成功',
                duration:2000
            })
            //更新界面,显示到属性列表界面
            this.showAttrList = true
            this.getAttrList()
        },
        //双击编辑输入框
        Editable(row,index){
            if(this.flag){
                return
            }
            //部分数据是从数据库中读出来的,没有isEdit属性,所以要添加,且要是响应式数据
            if(row.hasOwnProperty('isEdit')){
                row.isEdit = true
            }else{
                this.$set(row, 'isEdit',true)
            }
            this.$nextTick(() =>{
                this.$refs[`attrVal${index}`].focus()
            })
            // this.$refs[`attrVal${this.attrs.attrValueList.length-1}`].focus()
        },
        // 删除属性值
        removeAttrVal(index){
            if(this.flag){
                return
            }
            this.attrs.attrValueList.splice(index,1)
        },
        //取消按钮
        cancel(){
            this.showAttrList = true
            //在输入框内容出错的情况下,点击取消,flag会被置为true
            setTimeout(()=>{
                this.flag = false
            })
        },
        // 输入框失去焦点,回车
        toShow(row){
            //输入为空则取消添加
            if(row.valueName.trim()=== '') {
                this.attrs.attrValueList.pop()
                return
            }
            //输入的内容不能重复
            if(this.attrs.attrValueList.filter(item => item.valueName === row.valueName).length>=2){
                this.$message.warning({
                    message:'属性值名称不能重复!',
                    duration:1000
                })
                this.flag = true
                this.$refs[`attrVal${this.attrs.attrValueList.length-1}`].focus()
                return
            }
            this.flag = false
            row.isEdit = false
        },
        //新增属性值
        addAttrValue(){            
            //属性值重复,则不继续添加
            if(this.flag){
                return
            }
            
            //点击添加属性值,给attrValueList添加一项
            this.attrs.attrValueList.push({
                valueName:'',
                isEdit:true
            })
            //让最新 新增的输入框聚焦
            this.$nextTick(() =>{
                //最新界面更新后执行
                this.$refs[`attrVal${this.attrs.attrValueList.length-1}`].focus()
            })
            
        },
        //删除属性
        async removeAttr(row){
            await this.$API.attr.deleteAttr(row.id)
            this.$message.success({
                message:'删除成功',
                duration:1000
            })
            //更新界面
            this.getAttrList()
        },
        //当三级分类任意一级改变时,会触发这个vue自定义事件
        categoryChange({categoryId,level}){
            switch (level) {
                case 1:
                    this.category1Id = categoryId
                    this.category2Id =''
                    this.category3Id =''
                    this.tableData=[]
                    break;
                case 2:
                    this.category2Id = categoryId
                    this.category3Id = ''
                    this.tableData =[]
                    break;
                case 3:
                    this.category3Id = categoryId
                    this.getAttrList();
                    break;
                
            }
        },
        //获取属性列表
        async getAttrList(){
            const {category1Id,category2Id,category3Id} = this
            this.loading=true
            const {data}= await this.$API.attr.getAttrInfoList({category1Id,category2Id,category3Id})
            this.loading= false
            this.tableData = data
        },
        toAdd(){
            this.showAttrList = false
            this.attrs.id=''
            this.attrs.attrName = ''
            this.attrs.attrValueList = []
            //点击,显示属性值页面,禁用三级分类选择器
            this.$refs.categorySelector.disabled = !this.showAttrList
        },
        toEdit(row){
            //携带当前行数据
            this.row = row
            this.showAttrList = false
            this.attrs.attrName = row.attrName
            this.attrs.attrValueList = cloneDeep(row.attrValueList)
        }
    },
    
    
}

</script>
